<template>
    <p><input type="text" :placeholder="username"/></p>
    <p><input type="password" :placeholder="password"/></p>
    <a :href="url">百度首页</a>
    <div :class="{active:isActive}">绑定class属性</div>
    <div :style="{color:textColor,fontSize:fontSize+'px'}">对象语法绑定样式</div>
    <div :style="[style1,style2]">数组绑定样式</div>
</template>
<script setup>
import { ref } from 'vue';
let username= ref("请输入用户名");
const password="请输入密码";
const url="http://www.baidu.com";
const isActive=false;
const textColor="blue";
const fontSize=30;
const style1={backgroundColor:"yellow",padding:"30px"};
const style2={color:"blue",border:"1px solid #ddd"};
setTimeout(()=>{
    username.value="请再次输入用户名";
    style1.backgroundColor="blue"
    style2.color = "yellow"
    style2.border = "1px solid orange"
},5000)
</script>
<style scoped>
.active{
    color: red;
}
</style>